<template>
    <div class="white-box" v-loading="loading">
        <title-more title="基本信息" />
        <detail-item title="订单ID" bottom="24px" :value="objs.order_id" />
        <detail-item title="订单编号" bottom="24px" :value="objs.order_sn" />
        <detail-item title="用户信息(昵称/uid/电话)" bottom="24px" v-if="objs.user">
            <p>{{ objs.user.name }}[UID: {{ objs.user.uid }}]，{{ objs.user.mobile }}</p>
        </detail-item>
        <detail-item title="供应商信息(名称/ID/电话)" bottom="24px" v-if="objs.supplier">
            <p>{{ objs.supplier.title }}[ID: {{ objs.supplier.supplier_id }}]，{{ objs.supplier.phone }}</p>
        </detail-item>
        <detail-item title="申请时间" bottom="24px" :value="objs.created_at_label" />
        <detail-item title="下单时间" bottom="24px" :value="objs.order_created_at_label" />
        <detail-item title="审核时间" bottom="24px" :value="objs.admin_time_label" v-if="objs.admin_time > 0" />
    </div>
    <div class="white-box">
        <title-more title="退款信息" />
        <detail-item title="退款状态" bottom="24px" :value="status_label[objs.refund_status]" value-color="#4B93FA" />
        <detail-item title="退款失败原因" bottom="24px" :value="objs.refund_reason" v-if="objs.refund_status == 3" />
        <detail-item title="退款编号" bottom="24px" :value="objs.refund_no" />
        <detail-item title="退款理由" bottom="24px" :value="objs.reason_info" />
        <detail-item title="退款金额" bottom="24px" :value="objs.refund_amount" price-icon />
        <detail-item title="实际退款" bottom="24px" :value="objs.real_refund_amount" price-icon />
        <detail-item title="供应商扣款" bottom="24px" :value="objs.deduct_money" price-icon />
        <detail-item title="审核备注" bottom="24px" :value="objs.admin_msg" v-if="objs.admin_msg" />
        <detail-item title="退款凭证" bottom="24px" v-if="objs.photos">
            <div class="img-list">
                <div class="img-selects" v-for="(item, index) in objs.photos" :key="item.photo">
                    <el-image
                        class="img-selects__pic"
                        :src="proxy.imgUrl + item.photo + '!img_400'"
                        :preview-src-list="srcList"
                        :initial-index="index"
                        fit="cover"
                    />
                </div>
            </div>
        </detail-item>
        <detail-item title="退款凭证视频" bottom="24px" v-if="objs.video">
            <div class="video-box">
                <video :src="proxy.imgUrl + objs.video" controls controlsList="nodownload"></video>
            </div>
        </detail-item>
    </div>
    <div class="white-box">
        <title-more title="商品信息" />
        <el-table :data="goods" :header-cell-style="{ background: '#F5F7FA' }" element-loading-background="rgba(255, 255, 255, 0.6)">
            <el-table-column label="商品名称" width="300" fixed="left">
                <template #default="{ row }">
                    <div class="table-lr">
                        <el-image class="table-lr__img" loading="lazy" :src="proxy.imgUrl + row.product_img + '!img_400'" fit="cover" v-if="row.product_img" />
                        <div class="table-lr__right line-two">
                            <p class="lr-title line-one">{{ row.product_name }}</p>
                            <p class="lr-text">等级: {{ row.level || "无" }}，数量: {{ row.product_number }}{{ row.unit }}</p>
                            <p class="lr-text lr-price" style="color: #f3262a"><em>￥</em>{{ row.product_price }}</p>
                        </div>
                    </div>
                </template>
            </el-table-column>
            <el-table-column label="颜色" prop="color"></el-table-column>
            <el-table-column label="规格" width="120">
                <template #default="{ row }">
                    <p>{{ row.norm }}/{{ row.unit }}</p>
                </template>
            </el-table-column>
            <el-table-column label="供应价" prop="cost_price"></el-table-column>
            <el-table-column label="退货数量" prop="refund_num"></el-table-column>
            <el-table-column label="申请金额" prop="refund_amount"></el-table-column>
            <el-table-column label="退款金额" prop="real_refund_amount"></el-table-column>
            <el-table-column label="供应商扣款" prop="deduct_money" width="140" fixed="right"></el-table-column>
        </el-table>
    </div>

    <go-back />
</template>

<script setup>
import { getCurrentInstance, ref, onMounted } from "vue"
import { useRoute } from "vue-router"
import DetailItem from "@components/DetailItem.vue"
import TitleMore from "@components/title-more.vue"
import GoBack from "@components/GoBack.vue"

const route = useRoute()
const { proxy } = getCurrentInstance()

let rid = route.query.rid || ""
onMounted(() => {
    rid && getDetail()
})

const loading = ref(false)
const objs = ref({})
const goods = ref([])
const srcList = ref([])
const status_label = ["等待处理", "退款中", "退款成功",'退款失败']
function getDetail() {
    loading.value = true
    proxy.$axios
        .get("order/refund/detail", {
            params: {
                refund_id: rid,
            },
        })
        .then((res) => {
            loading.value = false
            if (res.data.code == 0) {
                let result = res.data.data
                if (result.photos && result.photos.length > 0) {
                    result.photos.map((item) => {
                        srcList.value.push(proxy.imgUrl + item.photo)
                    })
                }

                let arrs = []
                arrs.push({
                    product_img: result.product_img,
                    product_name: result.product_name,
                    product_number: result.product_number,
                    product_price: result.product_price,
                    color: result.color,
                    level: result.level,
                    norm: result.norm,
                    unit: result.unit,
                    refund_amount: result.refund_amount,
                    real_refund_amount: result.real_refund_amount,
                    deduct_money: result.deduct_money,
                    cost_price: result.cost_price,
                    refund_num: result.refund_num,
                })
                goods.value = arrs
                objs.value = result
            } else {
                proxy.$message({message:res.data.msg,type:"error"})
            }
        })
        .catch((err) => {
            loading.value = false
        })
}
</script>
<script>
export default {
    name: "AfterSalesDetail",
}
</script>

<style lang="less" scoped>
.config-box {
    padding: @padding-xl 0px @padding-xs;
}
:deep(.detail-item__left) {
    width: 160px !important;
}
.video-box {
    width: 300px;
    height: 200px;
    margin-right: @margin-md;
    position: relative;
    video {
        width: 100%;
        height: 100%;
    }
}
</style>
